<script setup lang="ts">
import { onMounted } from 'vue';

import { Card, Spin, Tree } from 'ant-design-vue';

import { useDepartmentOptions } from '#/hooks';

defineEmits<{ reload: [] }>();

const { loadDeptTree, withAllDeptTree } = useDepartmentOptions();

// 加载部门树
onMounted(() => {
  loadDeptTree();
});

// 所选部门Id
const selectDeptId = defineModel<(number | string)[]>('selectDeptId', {
  required: true,
});

// 加载动画展示
const userListLading = defineModel('userListLading', {
  default: false,
});
</script>

<template>
  <Card>
    <Spin :spinning="userListLading">
      <Tree
        v-if="withAllDeptTree.length > 0"
        v-model:selected-keys="selectDeptId"
        :field-names="{ title: 'deptName', key: 'id' }"
        :show-line="{ showLeafIcon: false }"
        :tree-data="withAllDeptTree"
        :virtual="false"
        default-expand-all
        @select="$emit('reload')"
      />
    </Spin>
  </Card>
</template>

<style scoped></style>
